<#assign nojs=true>
<#include "/WEB-INF/default/fragment/header.ftl">
<body>

<script type="text/javascript" src="${request.contextPath}/assets/js/jquery.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.10.6/moment.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.18.1/locale/zh-cn.js"></script>
<script type="text/javascript" src="${request.contextPath}/assets/js/bootstrap.min.js"></script>

<#include "/WEB-INF/default/fragment/nav.ftl">

<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<style>
.legend {
  border-bottom: 1px solid red;
  padding: 0px;
}
fieldset {
  width: 80%;
  margin: 0 auto;
}
</style>
<div class="container">
  <div class="tms-logo"><img class="center-block" src="${request.contextPath}/assets/images/logo.png" alt=""></div>
</div>

<div class="container">
<form class="form-horizontal" action="${request.contextPath}/task-post.action?team.id=${team.id}" method="post">
  <input type="hidden" class="form-control" name="task.team.id" value="${team.id}">

  <legend class="clearfix">
    <div class="pull-left"><h4>${title!"增加新任务"}</h4></div>
    <div class="pull-right">
      <a href="${request.contextPath}/team-${team.id}.action" class="btn btn-default">团队首页</a>
      <button type="submit" class="btn btn-success">保存</button>
    </div>
  </legend>
  <fieldset>
    <div class="form-group">
      <label class="col-sm-2 control-label">所属项目</label>
      <div class="col-sm-10">
        <#if projects??>
        <select name="task.project.id" class="form-control">
          <option value="">请选择</option>
          <#list projects as m>
          <option value="${m.id}">${m.title?html}</option>
          </#list>
        </select>
        <#else>
        <a href="" class="btn btn-warnning">请先添加项目</a>
        </#if>
        <p class="help-block">请选择该任务所属哪个项目</p>
        <#if fieldErrors?exists && fieldErrors['task.project.id']?exists>
        <p class="help-block"><span class="text-danger">${fieldErrors['task.project.id']}</span></p>
        </#if>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">任务名称</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="task.title" value="<#if task?exists && task.title?exists>${task.title?html}</#if>">
        <p class="help-block">成员需要完成的任务名称，如：打印 99 惩罚口诀或者画出折纸效果</p>
        <#if fieldErrors?exists && fieldErrors['task.title']?exists>
        <p class="help-block"><span class="text-danger">${fieldErrors['task.title']}</span></p>
        </#if>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">任务描述</label>
      <div class="col-sm-10">
        <textarea class="form-control" name="task.desc"><#if task?exists && task.title?exists>${task.title?html}</#if></textarea>
        <p class="help-block">完成任务的补充描述，如：请按照附件要求或者参考附件效果</p>
        <#if fieldErrors?exists && fieldErrors['task.desc']?exists>
        <p class="help-block"><span class="text-danger">${fieldErrors['task.desc']}</span></p>
        </#if>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">开始时间</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="yyyy-MM-dd" name="gmtStart" id="startDate" value="<#if gmtStart?exists>${gmtStart?date}<#else>${Parameters.date!""?html}</#if>">
        <p class="help-block">发布任务的时间。</p>
        <#if fieldErrors?exists && fieldErrors['gmtStart']?exists>
        <p class="help-block"><span class="text-danger">${fieldErrors['gmtStart']}</span></p>
        </#if>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">截止时间</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="yyyy-MM-dd" name="gmtFinished" id="gmtFinished" value="<#if gmtFinished?exists>${gmtFinished?date}</#if>">
        <p class="help-block">结束任务的日期。</p>
        <#if fieldErrors?exists && fieldErrors['gmtFinished']?exists>
        <p class="help-block"><span class="text-danger">${fieldErrors['gmtFinished']}</span></p>
        </#if>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">附件：</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="task.attachmentUrl" id="startDate" value="<#if task?exists && task.attachmentUrl?exists>${task.attachmentUrl?html}</#if>">
        <a class="btn btn-link j_upload_box" data-toggle="modal" data-target="#tmsUploadModal">上传附件</a>
        <p class="help-block">完成此项任务所需要的附件，素材、参考源码、jar 等，如果是多个文件，请压缩成 zip 格式。</p>
        <#if fieldErrors?exists && fieldErrors['task.attachmentUrl']?exists>
        <p class="help-block"><span class="text-danger">${fieldErrors['task.attachmentUrl']}</span></p>
        </#if>
      </div>
    </div>

    <script>
    (function(config) {
      $('#startDate').datetimepicker(config);
      $('#gmtFinished').datetimepicker(config);
    })({
      locale: 'zh-cn',
      format: 'YYYY-MM-DD HH:mm:ss', 
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down"
      }
    });

    $(document).on('click', '.j_upload_box', function() {
    });
    </script>

  </fieldset>
</form>
</div>

<div class="modal fade" id="tmsUploadModal" tabindex="-1" role="dialog" aria-labelledby="tmsUploadModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form class="tms-upload-form" action="" method="post" enctype="multipart/form-data">
        <input type="hidden" name="struts.enableJSONValidation" value="true" />
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="tmsUploadModalLabel">上传文件</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
              <label>请选择文件</label>
              <input type="file" id="file" name="file">
              <p class="help-block">&nbsp;</p>
          </div>
          <div class="form-group">
              <label>文件名字</label>
              <input type="text" class="form-control" name="filename">
              <p class="help-block">&nbsp;</p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary tms-upload-form-submit" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> 正在上传">上传</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
(function(onSucced) {
  $(document).on('submit', '.tms-upload-form', function() {
    $('.tms-upload-form-submit').button('loading');
    var formdata = new FormData($(this).get(0));
    jQuery.ajax({
      url: '${request.contextPath}/upload.action?struts.enableJSONValidation=true',
      type: 'POST',
      dataType: 'json',
      data: formdata,
      processData : false,
      contentType: false,
      complete: function(xhr, textStatus) {
        //called when complete
        $('.tms-upload-form-submit').button('reset');
      },
      success: function(data, textStatus, xhr) {
        if(data['fieldErrors'] != null) {
          for (var i in data['fieldErrors']) {
            $('input[name="'+i+'"]').next().html(data['fieldErrors'][i]);
          }
          return;
        }
        if (data['status'] === 1) {
          onSucced(data.data);
          $('#tmsUploadModal').modal('hide')
        }
        if (data['status'] === 0) {
          alert(data.message);
        }
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log(xhr, textStatus, errorThrown);
      }
    });

    return false;
  });
})(function(url) {
  $('input[name="task.attachmentUrl"]').val(url);
});
</script>

</body>
<#include "/WEB-INF/default/fragment/footer.ftl">
